import React, { useState, useEffect } from 'react';
import { useDashboardStore } from '../store/dashboardStore';
import styles from './FilterPanel.module.css';

interface FilterPanelProps {
  visible: boolean;
  onClose: () => void;
}

export const FilterPanel: React.FC<FilterPanelProps> = ({ visible, onClose }) => {
  const {
    filters,
    availableRegions,
    availableStores,
    availableTimeRanges,
    userPermission,
    setFilters,
    loadData
  } = useDashboardStore();

  const [localFilters, setLocalFilters] = useState(filters);

  // 根据权限过滤选项
  const filteredRegions = availableRegions.filter(region => 
    region === '全部' || userPermission.canViewAll || userPermission.region.includes(region)
  );

  const filteredStores = availableStores.filter(store => 
    store === '全部' || userPermission.canViewAll || userPermission.store.includes(store)
  );

  // 当筛选器状态改变时更新本地状态
  useEffect(() => {
    setLocalFilters(filters);
  }, [filters]);

  const handleFilterChange = (key: keyof typeof filters, value: any) => {
    setLocalFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const handleApply = () => {
    setFilters(localFilters);
    loadData(); // 立即加载数据
    onClose();
  };

  const handleReset = () => {
    const resetFilters = {
      region: '全部',
      store: '全部',
      timeRange: '今日',
      startDate: '2024-01-01',
      endDate: '2024-12-31'
    };
    setLocalFilters(resetFilters);
    setFilters(resetFilters);
    loadData(); // 立即加载数据
  };

  if (!visible) return null;

  return (
    <div className={styles.overlay}>
      <div className={styles.filterPanel}>
        <div className={styles.header}>
          <h2 className={styles.title}>
            <span className={styles.titleIcon}>🔍</span>
            数据筛选器
          </h2>
          <button className={styles.closeButton} onClick={onClose}>×</button>
        </div>
        
        <div className={styles.content}>
          <div className={styles.filterGroup}>
            <label className={styles.label}>
              <span className={styles.labelIcon}>🏢</span>
              区域选择
            </label>
            <select 
              className={styles.select}
              value={localFilters.region}
              onChange={(e) => handleFilterChange('region', e.target.value)}
            >
              {filteredRegions.map(region => (
                <option key={region} value={region}>{region}</option>
              ))}
            </select>
          </div>

          <div className={styles.filterGroup}>
            <label className={styles.label}>
              <span className={styles.labelIcon}>🏪</span>
              门店选择
            </label>
            <select 
              className={styles.select}
              value={localFilters.store}
              onChange={(e) => handleFilterChange('store', e.target.value)}
            >
              {filteredStores.map(store => (
                <option key={store} value={store}>{store}</option>
              ))}
            </select>
          </div>

          <div className={styles.filterGroup}>
            <label className={styles.label}>
              <span className={styles.labelIcon}>📅</span>
              时间范围
            </label>
            <select 
              className={styles.select}
              value={localFilters.timeRange}
              onChange={(e) => handleFilterChange('timeRange', e.target.value)}
            >
              {availableTimeRanges.map(range => (
                <option key={range} value={range}>{range}</option>
              ))}
            </select>
          </div>

          <div className={styles.filterGroup}>
            <label className={styles.label}>
              <span className={styles.labelIcon}>⏰</span>
              自定义时间
            </label>
            <div className={styles.dateRange}>
              <input 
                type="date"
                className={styles.dateInput}
                value={localFilters.startDate || ''}
                onChange={(e) => handleFilterChange('startDate', e.target.value)}
              />
              <span className={styles.dateSeparator}>至</span>
              <input 
                type="date"
                className={styles.dateInput}
                value={localFilters.endDate || ''}
                onChange={(e) => handleFilterChange('endDate', e.target.value)}
              />
            </div>
          </div>

          <div className={styles.filterInfo}>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>当前权限:</span>
              <span className={styles.infoValue}>
                {userPermission.canViewAll ? '管理员' : '普通用户'}
              </span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>可访问区域:</span>
              <span className={styles.infoValue}>
                {userPermission.canViewAll ? '全部' : userPermission.region.join(', ')}
              </span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>可访问门店:</span>
              <span className={styles.infoValue}>
                {userPermission.canViewAll ? '全部' : userPermission.store.join(', ')}
              </span>
            </div>
          </div>

          <div className={styles.actions}>
            <button className={styles.resetButton} onClick={handleReset}>
              <span className={styles.buttonIcon}>🔄</span>
              重置
            </button>
            <button className={styles.applyButton} onClick={handleApply}>
              <span className={styles.buttonIcon}>✅</span>
              应用筛选
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}; 